<template>
	<uni-nav-bar
	  dark 
	  :fixed="true" 
	  shadow 
	  status-bar 
	  left-icon="arrow-left" 
	  title="全市逾期欠费" 
	  right-text="导出EXCEL"
	  @clickLeft="back" 
	  @clickRight="xz"
	/>
  <view class="container">
	  <!-- 导航栏 -->
	
	  
    <!-- 顶部固定区域 -->
    <view class="fixed-top" >
    

      <!-- 日期栏 -->
      <view class="date-bar">
        <text class="left">{{ titleText }}全市逾期欠费(万元)</text>
        <text class="date">{{ todayText }}</text>
        <button class="history-btn" @tap="openDatePicker">查看历史</button>
      </view>

      <!-- 日 / 月 / 跨赛 -->
     <!-- <view class="period-bar">
        <view
          v-for="p in periods"
          :key="p.key"
          class="period"
          :class="{ active: activePeriod === p.key }"
          @tap="switchPeriod(p.key)"
        >
          {{ p.name }}
        </view>
      </view> -->

      <!-- 表头 -->
      <view class="table-header" >
        <view class="fixed-left-header" >
          <view class="tr head">
            <view class="th rank">排名</view>
            <view class="th city">
				单位</view>
          </view>
        </view>

        <scroll-view
          scroll-x
          :scroll-left="scrollLeft"
          class="scroll-right-header" 
        >
          <view class="tr head" >
            <view
              v-for="col in columns"
              :key="col.key"
              class="th sort-th"
              @tap="sortBy(col.key)"
            >
              {{ col.name }}
              <view class="arrows">
                             <text
                               class="up"
                               :class="{ active: sortKey === col.key && sortOrder === 'asc' }"
                             >▲</text>
                             <text
                               class="down"
                               :class="{ active: sortKey === col.key && sortOrder === 'desc' }"
                             >▼</text>
                           </view>
            </view>
			
          </view>
		  
        </scroll-view>
      </view>
    </view>
    <!-- 内容区：上下滚动时整行联动 -->
    <scroll-view scroll-y class="scroll-y-wrapper">
      <view class="table-body">
        <!-- 左侧固定列 -->
        <view class="fixed-left">
          <view
            v-for="(item, index) in rowHeightList"
            :key="item.code"
            class="tr"
            :class="[item.heightCls, { stripe: index % 2 === 1 }]"
          >
            <view class="td rank">
              <text 
			  class="branch"
			  >{{ index + 1 }}</text>
            </view>
            <view
              class="td city"
              :class="{
                'black-text': activeTab === 'county'
              }"
            >
                <text
                  class="city-text"
                  :data-tab="activeTab">   <!-- 关键：告诉 CSS 当前维度 -->
                  {{ item.name }}
                </text>

            </view>
          </view>
          
        </view>
        <!-- 右侧可横向滚动的内容 -->
        <scroll-view
          scroll-x
          scroll-y
          @scroll="onRightScroll"
          class="scroll-right-body"
        >
          <view class="table-data">
            <view
              v-for="(item, index) in rowHeightList"
              :key="item.code"
              class="tr"
              :class="[item.heightCls, { stripe: index % 2 === 1 }]"
            >
              <view class="td">{{ item.bk }}</view>
			  <view class="td">{{ item.fx }}</view>
			  <view class="td">{{ item.hj }}</view>
			  <view class="td">{{ item.jy }}</view>
			  <view class="td">{{ item.ds }}</view>
			  <view class="td">{{ item.gj }}</view>
			  <view class="td">{{ item.kdbg }}</view>
			  <view class="td">{{ item.bzkd }}</view>
			  <view class="td">{{ item.wl }}</view>
			  <view class="td">{{ item.total }}</view>
            </view>
			

          </view>
        </scroll-view>
      </view>
    </scroll-view>
	<view style="height: 88rpx;"></view>
	<!-- 原来合计行删掉，换成下面这一段（放到最外层，和 scroll-y-wrapper 同级） -->
<view class="total-row">
  <!-- 左侧固定 -->
  <view class="total-left">
    <view class="td">-</view>
    <view class="td">合计</view>
  </view>

  <!-- 右侧可滚动 -->
  <scroll-view
    scroll-x
    class="total-right"
    :scroll-left="scrollLeft"
  >
    <view class="total-data">
      <view
        v-for="col in columns"
        :key="col.key"
        class="td-mx"
      >
        {{ total[col.key] }}
      </view>
    </view>
  </scroll-view>
</view>

    <!-- 三级联动日期弹窗 -->
    <view v-if="showPicker" class="mask" @tap="showPicker=false">
      <view class="picker-panel" @tap.stop>
        <picker-view
          :value="pickerVal"
          indicator-style="height:88rpx"
          style="height:420rpx"
          @change="pickerChange"
        >
          <picker-view-column>
            <view v-for="(y,i) in years" :key="i" class="picker-item">{{ y }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="(m,i) in months" :key="i" class="picker-item">{{ m }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="(d,i) in days" :key="i" class="picker-item">{{ d }}日</view>
          </picker-view-column>
        </picker-view>
        <view class="btn-group">
          <text class="btn" @tap="showPicker=false">取消</text>
          <text class="btn confirm" @tap="confirmDate">确定</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import utils from '../../common/utils'
import store from '../../common/store.js'
export default {
  data() {
    return {
      activeTab   : 'county',
      tabs        : [
        { key: 'county', name: '县市' },
        { key: 'branch', name: '网点' }
      ],
      activePeriod: 'day',
      periods     : [
        { key: 'day',    name: '日' },
        { key: 'month',  name: '月' },
        { key: 'season', name: '跨赛' }
      ],
      columns: [
        { key: 'bk',   name: '报刊' },
        { key: 'fx',   name: '分销' },
        { key: 'hj',   name: '函件' },
        { key: 'jy',   name: '集邮' },
        { key: 'ds',   name: '电商' },
        { key: 'gj',   name: '国际' },
        { key: 'kdbg', name: '快递包裹' },
        { key: 'bzkd', name: '标准快递' },
        { key: 'wl',   name: '物流' },
        { key: 'total',name: '合计' }
      ],
      list     : [],
	  tableData: [
	          { name: '张三', age: 25, department: '技术部' },
	          { name: '李四', age: 30, department: '市场部' }
	        ],
      total: {
        bk:0, fx:0, hj:0, jy:0, ds:0,
        gj:0, kdbg:0, bzkd:0, wl:0, total:0
      },
      sortKey  : '',
      sortOrder: '',
      todayText: '',
      queryDate: '',
      showPicker: false,
      pickerVal: [0,0,0],
      years : [],
      months: [],
      days  : [],
	  pcode:"",
      scrollLeft: 0,
	  jb:"2"
    }
  },
  computed: {
    dimensionName() {
      return { county: '县市', branch: '网点' }[this.activeTab] || '机构'
    },
    /* 1. 先排序 */
    showList(){
      if (!this.sortKey) return this.list
      const arr = [...this.list]
      const key = this.sortKey, order = this.sortOrder
      arr.sort((a, b) => 
        order === 'asc'
          ? Number(a[key]) - Number(b[key])
          : Number(b[key]) - Number(a[key])
      )
      return arr
    },
  
    /* 2. 再给排序后的结果打行高类名 */
    rowHeightList(){
      return this.showList.map(item=>{
        const len = item.name.length
        let cls = 'h80'
        if (len > 20) cls = 'h240'
        else if (len > 16) cls = 'h200'
        else if (len > 12) cls = 'h160'
        else if (len > 8) cls = 'h120'
        else if (len > 4) cls = 'h80'
        return { ...item, heightCls: cls }
      })
    }
  }, 
  onLoad() {
    this.initDate()
    this.loadData(this.jb)
  },
  methods: { 
	xz() {
	  console.info("准备提交数据给后端生成Excel...");
	  if (!this.tableData || this.tableData.length === 0) {
	    this.$utils.toast('暂无数据可下载');
	    return;
	  }
	
	  this.$utils.showLoading('正在生成Excel文件...');
	
	  // ========== 新增：判断设备类型（iOS/安卓） ==========
	  const isIOS = /iPhone|iPad|iPod|Mac OS/.test(navigator.userAgent);
	  const isAndroid = /Android/.test(navigator.userAgent);
	  
	  try {
	    // 1. 构造提交参数
	    const data = {
	      token: uni.getStorageSync("userInfo").token,
	      tableData: this.tableData
	    };
	    const postData = { data: JSON.stringify(data) };
	
	    // 2. 发送异步请求（H5端专用）
	    uni.request({
	      url: 'http://stjk.whsyzj.com/cwqf-api/qyh/qfkb/yqkb_xls',
	      method: 'POST',
	      data: postData,
	      header: {
	        'content-type': 'application/x-www-form-urlencoded'
	      },
	      success: (res) => {
	        this.$utils.hideLoading();
	        // 3. 处理后端响应，按设备类型差异化下载
	        if (res.data && res.data.code === 200) {
	          const downloadUrl = res.data.downloadUrl;
	
	          // iOS设备：用动态a标签（兼容Safari）
	          if (isIOS) {
				console.info("走了ios下载");  
	            const link = document.createElement('a');
	            link.href = decodeURIComponent(downloadUrl);
	            link.target = '_blank';
	            link.download = downloadUrl.split('/').pop() || '逾期欠费看板.xlsx'; // 强制下载
	            document.body.appendChild(link);
	            link.click();
	            document.body.removeChild(link);
	          } 
	          // 安卓设备：保留原有window.open
	          else if (isAndroid) {
				  console.info("走了isAndroid下载"); 
	            window.open(downloadUrl, '_blank');
	          } 
	          // 其他设备（PC）：兼容处理
	          else {
				  console.info("走了pc下载"); 
	            window.open(downloadUrl, '_blank');
	          }
	
	          this.$utils.toast('Excel文件已生成，即将开始下载...');
	        } else {
	          this.$utils.toast(`生成失败：${res.data?.message || '未知错误'}`);
	        }
	      },
	      fail: (err) => {
	        this.$utils.hideLoading();
	        this.$utils.toast(`请求失败：${err.errMsg || '网络异常，请稍后重试'}`);
	      }
	    });
	
	  } catch (e) {
	    this.$utils.hideLoading();
	    this.$utils.toast(`数据处理异常：${e.message}`);
	  }
	},  
	countyClick(item) {
	   if(this.jb=="2"){
		   this.pcode=item.code; 
		   this.jb="3"; 
		   this.activeTab = "branch";
		   this.loadData(this.jb); 
	   }
	},  
    initDate() {
      const today = new Date()
      this.initPicker(today)  
      this.setToday(today) 
    }, 
    setToday(date) {
      const y = date.getFullYear()
      const m = (date.getMonth() + 1).toString().padStart(2, '0')
      const d = date.getDate().toString().padStart(2, '0')
      this.todayText = `${y}年${m}月${d}日`
      this.queryDate = `${y}-${m}-${d}`
    },
    initPicker(date) {
      const y = date.getFullYear()
      const m = date.getMonth() + 1
      const d = date.getDate()
      this.years  = Array.from({ length: 11 }, (_, i) => y - 5 + i)
      this.months = Array.from({ length: 12 }, (_, i) => i + 1)
      this.updateDays(y, m)
      this.pickerVal = [
        this.years.indexOf(y),
        m - 1,
        d - 1
      ]
    },
    updateDays(y, m) {
      const max = new Date(y, m, 0).getDate()
      this.days = Array.from({ length: max }, (_, i) => i + 1)
    },
    pickerChange(e) {
      const [yi, mi, di] = e.detail.value
      const y = this.years[yi]
      const m = this.months[mi]
      if (mi !== this.pickerVal[1]) {
        this.updateDays(y, m)
      }
      this.pickerVal = [yi, mi, Math.min(di, this.days.length - 1)]
    },
    openDatePicker() {
      const [y, m, d] = this.queryDate.split('-').map(Number)
      this.initPicker(new Date(y, m - 1, d))
      this.showPicker = true
    },
    confirmDate() {
      const [yi, mi, di] = this.pickerVal
      const date = new Date(this.years[yi], this.months[mi] - 1, this.days[di])
      this.setToday(date)
      this.showPicker = false
      this.loadData(this.jb)
    },
    switchTab(key)   { 
		this.activeTab = key;    
		console.log("key:"+key);
		if(key=="county"){
			this.jb="2";
		}else{
			this.jb="3";
		}
		console.log("this.jb:"+this.jb);
		this.loadData(this.jb) 
	},
    switchPeriod(key){ this.activePeriod = key; this.loadData() },
	sortBy(key) {
         if (this.sortKey === key) {
           if (this.sortOrder === '')         this.sortOrder = 'asc'
           else if (this.sortOrder === 'asc') this.sortOrder = 'desc'
           else { this.sortKey = ''; this.sortOrder = '' }
         } else {
           this.sortKey = key
           this.sortOrder = 'asc'
         }
       },
    onRightScroll(e) {
      this.scrollLeft = e.detail.scrollLeft
    },
	chineseDateToYmd(str) {
	  // 2025年08月25日 → 2025-08-25
	  return str
	    .replace(/年|月/g, '-')
	    .replace(/日/g, '')
	    .replace(/-(\d)(?=-|$)/g, '-0$1'); // 补零
	},
	back() {
		  
		  if(this.jb=='2'){
			uni.navigateBack();
		  }else{
			  this.jb='2'
			  this.activeTab = "county";
			  this.loadData(this.jb); 
		  }
	}, 
    loadData: async function (jb) {
      this.list = []
      this.$utils.showLoading('数据加载中...')
      let data = {
        timestamp: this.$utils.getTimestamp(),
        jb: jb,
        rq: this.chineseDateToYmd(this.todayText),
        pcode: this.pcode
      }
      let enData = this.$utils.encrypt(JSON.stringify(data), uni.getStorageSync("userInfo").aesKey, uni.getStorageSync("userInfo").aesIv)
      let postData = { data: '' + enData + '' }
      try {
        let res = await this.$myRequest.post_token('qyh/qfkb/qskbInitData', postData)
        if (res.code === 200) {
          let a = JSON.parse(utils.decrypt(res.data, uni.getStorageSync("userInfo").aesKey, uni.getStorageSync("userInfo").aesIv))
          const src = a.qsyqqfList || []
    
          this.list = src.map((row, idx) => ({
            name: row.name,
            rank: idx + 1,
            bk: this.formatToWan(row.bk),
            fx: this.formatToWan(row.fx),
            hj: this.formatToWan(row.hj),
            jy: this.formatToWan(row.jy),
            ds: this.formatToWan(row.ds),
            gj: this.formatToWan(row.gj),
            kdbg: this.formatToWan(row.kdbg),
            bzkd: this.formatToWan(row.bzkd),
            wl: this.formatToWan(row.wl),
            total: this.formatToWan(row.total)
          }))
    
          // 计算合计
          const t = {
            bk: 0, fx: 0, hj: 0, jy: 0, ds: 0,
            gj: 0, kdbg: 0, bzkd: 0, wl: 0, total: 0
          }
          this.list.forEach(r => {
            t.bk += Number(r.bk)
            t.fx += Number(r.fx)
            t.hj += Number(r.hj)
            t.jy += Number(r.jy)
            t.ds += Number(r.ds)
            t.gj += Number(r.gj)
            t.kdbg += Number(r.kdbg)
            t.bzkd += Number(r.bzkd)
            t.wl += Number(r.wl)
            t.total += Number(r.total)
          })
          Object.keys(t).forEach(k => (t[k] = t[k].toFixed(2)))
          this.total = t
    
          // 同步更新tableData（包含排名、单位、所有列数据及合计行）
          this.tableData = [
            // 表格主体数据（带排名）
            ...this.rowHeightList.map((item, index) => ({
              排名: index + 1,
              单位: item.name,
              报刊: item.bk,
              分销: item.fx,
              函件: item.hj,
              集邮: item.jy,
              电商: item.ds,
              国际: item.gj,
              快递包裹: item.kdbg,
              标准快递: item.bzkd,
              物流: item.wl,
              合计: item.total
            })),
            // 合计行
            {
              排名: '-',
              单位: '合计',
              报刊: this.total.bk,
              分销: this.total.fx,
              函件: this.total.hj,
              集邮: this.total.jy,
              电商: this.total.ds,
              国际: this.total.gj,
              快递包裹: this.total.kdbg,
              标准快递: this.total.bzkd,
              物流: this.total.wl,
              合计: this.total.total
            }
          ]
    
        } else {
          this.$utils.toast(res.msg || '数据加载失败')
        }
      } catch (e) {
        this.$utils.toast('网络异常：' + e)
      } finally {
        this.$utils.hideLoading()
      }
    },
	//返回万元
	formatToWan(num){
		return this.$utils.formatToWan(num);
	}
  }
}
</script>

<style lang="scss" scoped>
/* ===== 全局容器 ===== */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f6f6f6;
  flex: 1;            /* 占剩余高度 */
}

/* ===== 顶部固定区域 ===== */
.fixed-top {
  // position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #f6f6f6;
  flex-shrink: 0;         /* 不被压缩 */
  
}

/* 标签栏 */
.tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #e8e8e8;
  .tab {
    flex: 1;
    text-align: center;
    padding: 26rpx 0;
    font-size: 32rpx;
    color: #333;
    position: relative;
    &.active {
      color: #e60012;
      font-weight: bold;
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: #e60012;
      }
    }
  }
}

/* 日期栏 */
.date-bar {
  // height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 32rpx;
  background: #fff;
  .left {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
  }
  .date {
    font-size: 30rpx;
    color: #333;
  }
.history-btn {
  margin: 0;
  font-size: 28rpx;
  color: #e60012;
  border: 1rpx solid #e60012;
  border-style: solid;   /* 关键：去掉 outset 灰色 */
  background: transparent;
  border-radius: 8rpx;
  padding: 4rpx 12rpx;
  line-height: 1.3;
}
}

/* 周期栏 */
.period-bar {
  display: flex;
  background: #fff;
  padding: 0 32rpx 20rpx;
  .period {
    margin-right: 32rpx;
    font-size: 28rpx;
    color: #666;
    &.active {
      color: #e60012;
      font-weight: bold;
    }
  }
}

/* 表头 */
.table-header {
  display: flex;
  background: #fafafa;
  border-bottom: 1rpx solid #e8e8e8;
}
.fixed-left-header {
  width: 240rpx;
  flex-shrink: 0;
  border-right: 1rpx solid #e8e8e8;
   justify-content: center;
    text-align: center;
}
.scroll-right-header {
  flex: 1;
  overflow: hidden;
}

/* ===== 内容区 ===== */
.scroll-y-wrapper {
  flex: 1;
  overflow: hidden;
  min-height: 60rpx;
  margin-top: 160px;
}
.table-body {
  display: flex;
}
.fixed-left {
  width: 240rpx;
  flex-shrink: 0;
  background: #fff;
  border-right: 1rpx solid #e8e8e8;
}
.scroll-right-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  /* 偶数行背景整片兜底，避免被裁剪 */
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
	width: 1000rpx;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    /* 1086rpx 与 .table-data 同宽 */
     
    background-image: repeating-linear-gradient(
      to bottom,
      transparent        0,
      transparent        88rpx,      /* 奇数行高 */
      #fef6f6            1000rpx,      /* 偶数行底色 */
      #fef6f6            1000rpx      /* 88*2 */
    );
  }
}
.table-data {
  min-width: 1000rpx;
}



/* ===== 通用行/单元格 ===== */
.tr {
   height: 60rpx;          /* 想再压可自行调小 */
   
   // height: auto !important;    /* 覆盖旧值 */
   align-items: stretch;       /* 让 td 撑满行高 */
  
  // overflow: hidden;            // 超出隐藏，避免换行撑高
  display: flex;

  &.head {
    background: #fafafa;
    font-weight: bold;
    color: #333;
  }
  &.stripe {
    background: #fef6f6;
  }
  &.total {
    background: #e60012;
    color: #fff;
    font-weight: bold;
  }
}
.th,
.td {
  padding: 12rpx 8rpx;      /* 留一点内边距 */
    line-height: 1.4;           /* 单行也居中，多行自动加高 */
  white-space: normal;

  width: 150rpx;
  flex-shrink: 0;
  text-align: center;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #e8e8e8;
  &:last-child {
    border-right: none;
  }
}
.fixed-left-header .th,
.fixed-left .td {
  width: 70rpx;
  &.city {
    width: 140rpx;

  }
}

.sort-th {
  position: relative;
  .arrows {
    display: inline-flex;
    flex-direction: column;
    margin-left: 6rpx;
    .up,
    .down {
      font-size: 20rpx;
      color: #ccc;
      line-height: 1;
      &.active {
        color: #e60012;
      }
    }
  }
}
.rank-box {
  display: inline-block;
  width: 24rpx;
  height: 48rpx;
  line-height: 48rpx;
 
  
  text-align: center;
}
.red-text {
  color: #e60012;
}

/* ===== 日期弹窗 ===== */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}
.picker-panel {
  width: 100%;
  background: #fff;
  border-top-left-radius: 32rpx;
  border-top-right-radius: 32rpx;
}
.picker-item {
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 30rpx;
}
.btn-group {
  display: flex;
  border-top: 1rpx solid #e8e8e8;
  .btn {
    flex: 1;
    text-align: center;
    padding: 28rpx 0;
    font-size: 32rpx;
    color: #666;
    &.confirm {
      color: #e60012;
      font-weight: bold;
    }
  }
}
/* 固定在底部 */
.total-row{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background: #e60012;
  color: #fff;
  font-weight: bold;
  display: flex;
  z-index: 200;
  align-items: stretch;   /* 让子元素高度 100% */

}

/* 左侧固定列，宽度和上面保持一致 280rpx */
.total-left{
  width: 240rpx;
  flex-shrink: 0;
  display: flex;
  border-right: 1rpx solid #fff;
  .td{
    width: 100rpx;
    &:last-child{ width: 140rpx; }
  }
}

/* 右侧滚动区域 */
.total-right{
  flex: 1;
  overflow: hidden;
  
}
.total-data{
  display: flex;
  min-width: 2000rpx;
}
.total-row .td{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70rpx;
  flex-shrink: 0;
  font-size: 28rpx;
  border-right: 1rpx solid #fff;
  &:last-child{ border-right: none; }
}
.total-row .td-mx {
  padding: 12rpx 8rpx;
  width: 170rpx;
  flex-shrink: 0;
  text-align: center;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #fff;   /* 与合计行主题色一致 */
  height: 50px;                    /* 关键：占满父级高度 */
  box-sizing: border-box;
  &:last-child {
    border-right: none;
  }
}

/* 给主体区域留一点底边距，避免被合计行遮住 */
.scroll-y-wrapper{
	margin-top: 0;
  padding-bottom: 110rpx;
}
/* 1. 右侧内容一次性做宽 */
.table-data,
.total-data {
  min-width: 1675rpx;
}

/* 2. 左侧固定列 + 右侧内容行统一背景 */
.fixed-left   .tr:nth-child(odd)  { background: #fff; }
.fixed-left   .tr:nth-child(even) { background: #fef6f6; }

.table-data   .tr:nth-child(odd)  { background: #fff; }
.table-data   .tr:nth-child(even) { background: #fef6f6; }

/* 3. 删除/覆盖之前所有渐变、::after 背景 */
.scroll-right-body::after { display: none; }
.black-text {
  color: #000;
}
/* ========== 禁止页面整体上下滑动 ========== */
page {
  height: 100vh;
  overflow: hidden;   /* 关键：干掉页面级滚动 */
}

/* 让容器高度=屏幕高度，只给表格区域留滚动权限 */
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部固定区、底部合计行不滚动 */
.fixed-top,
.total-row {
  flex-shrink: 0;
}

/* 中间唯一可滚动区域 */
.scroll-y-wrapper {
  flex: 1;
  overflow-y: auto;   /* 仅这里允许上下滑 */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* iOS 顺滑 */
}
.total-row .td-mx {
  height: 100rpx;   // 新增
  box-sizing: border-box;
}
.tr.h80 { min-height: 80rpx; }
.tr.h120 { min-height: 120rpx; }
.tr.h160{ min-height:160rpx; }
.tr.h200{ min-height:200rpx; }
.tr.h240{ min-height:240rpx; }
.tr.h280{ min-height:280rpx; }
/* 默认黑色无下划线 */
.city-text {
  color: #000;
}

/* 仅在 county 时红色 + 下划线 */

.xz-btn {
  margin: 0;
  font-size: 28rpx;
  color: #006699;
  border: 1rpx solid #006699;
  border-style: solid;   /* 关键：去掉 outset 灰色 */
  background: transparent;
  border-radius: 8rpx;
  padding: 4rpx 12rpx;
  line-height: 1.3;
}
</style>